<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="companyPlatformId" class="zs-select-md zs-space-right-sm" placeholder="平台商名称"
                    filterable>
                    <el-option v-for="item in platList" :key="item.companyPlatformId" :label="item.companyPlatformName"
                        :value="item.companyPlatformId" />
                </el-select>
                <el-date-picker class="zs-space-right-sm" v-model="startDate" :type="pickerDate" placeholder="开始月份"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateStart"
                    @change="changeDate()" />
                <el-date-picker class="zs-space-right-sm" v-model="endDate" :type="pickerDate" placeholder="结束月份"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateEnd"
                    @change="changeDate()" />
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="yearmonth" label="日期" width="120" :align="'center'"></el-table-column>
                <el-table-column label="分账订单" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.orderAmount) }}
                    </template>
                </el-table-column>
                <el-table-column label="分账收入" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.dividePriceMonth) }}
                    </template>
                </el-table-column>
                <el-table-column label="环比上月" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.qoqMonth == '-' ? '-' : `${scope.row.qoqMonth}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="同比去年" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.yoyYear == '-' ? '-' : `${scope.row.yoyYear}%` }}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="查看" width="150" :align="'right'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">收入</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="zs-text-gray-dark zs-text-sm zs-space-top">*销售额：万元；客流量：万人次；车流量：车次</div> -->
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import dashBoardApi from '@/api/EnterpriseServices/dashBoard'
import detailApi from '@/api/EnterpriseServices/detailPages'
import { ElMessage } from 'element-plus'
import { toThousands } from '@/utils/number-util'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let companyPlatformId = ref(Number(route.companyPlatformId))
let platList = ref([])
let startDate = ref('')
let endDate = ref('')
let valueFormat = ref('YYYY-MM')
let pickerDate = ref('month')
const tableData = ref([])

const getPlatList = () => {
    dashBoardApi.getCompanyPlatformListApi().then((res) => {
        if (res.data.code == 200) {
            platList.value = res.data.data
        }
    })
}
getPlatList()

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}
// 未选择日期组件时，使用url参数查询，选择了日期之后，使用页面选择的日期（ps: 为了默认进来显示出【开始日期】【结束日期】）
const isSelect = ref(false)
const changeDate = () => {
    isSelect.value = true
    console.log(isSelect.value)
}
const getList = () => {
    if (isSelect.value && ((startDate.value && !endDate.value) || (!startDate.value && endDate.value))) {
        ElMessage({
            message: '请选择开始日期和结束日期',
            type: 'warning',
        })
        return false
    }
    let start = isSelect.value ? startDate.value : route.startDate
    let end = isSelect.value ? endDate.value : route.endDate
    detailApi.incomeDetailApi({ companyPlatformId: companyPlatformId.value, startData: start, endData: end, pageNo: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.data.childList
            total.value = res.data.data.totalCount
        }
    })
}
getList()


const getData = () => {
    currentPage.value = 1
    getList()
}

const disabledDateStart = (date) => {
    // return date.getTime() < new Date('2019-05-01').getTime() - 24 * 60 * 60 * 1000 || date.getTime() > new Date(updateDate).getTime()
    return date.getTime() > new Date(route.updateDate).getTime()
}

const disabledDateEnd = (date) => {
    return date.getTime() > new Date(route.updateDate).getTime()
}

const goDetail = (row) => {
    console.log(row)
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'EnterpriseServices/detailPages/incomeAssay/incomeAssayMonth',
            rTitle: '收入详情',
            companyPlatformId: companyPlatformId.value,
            theDate: row.yearmonth,
        },
    })
}

</script>


<style scoped lang="scss"></style>
